<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>APP</title>
		<link rel="stylesheet" type="text/css" href="../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../css/aui-eg.css" />
		<style>
			html , body {
				background-color: transparent;
			}
		</style>
	</head>
	<body>
		<div onclick="topListTouch('-1');" id="aui_modal" class="aui-eg-modal aui-eg-modal-bg">
			<div id="aui_modal_top" class="aui-eg-modal-top">
				<div id="aui_modal_top_point" class="aui-eg-modal-top-point aui-hide"></div>
				<ul id="aui_modal_top_view" class="aui-eg-modal-top-view">
				</ul>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/delicate-ac-0.1.js"></script>
	<script type="text/javascript">
		apiready = function() {
			api.parseTapmode();
			init();
		};
		function init() {
			//模态透明度
			var modalOpacity = api.pageParam.modalOpacity?api.pageParam.modalOpacity:"0.0";
			//模态框x
			var x = api.pageParam.x?api.pageParam.x:0;
			//模态框y
			var y = api.pageParam.y?api.pageParam.y:0;
			//模态框w
			var w = api.pageParam.w?api.pageParam.w:150;
			//模态框h
			var h = api.pageParam.h?api.pageParam.h:300;
			//是否有指向三角
			var point = api.pageParam.point?api.pageParam.point:true;
			//指向三角x
			var pointX = api.pageParam.pointX?api.pageParam.pointX:65;
			//指向三角w
			var pointW = api.pageParam.pointW?api.pageParam.pointW:10;
			//指向三角h
			var pointH = api.pageParam.pointH?api.pageParam.pointH:10;
			//菜单背景颜色 支持rgba透明
			var menuBgColor = api.pageParam.menuBgColor?api.pageParam.menuBgColor:"rgba(255,255,255,0.8)";
			//菜单圆角
			var menuRadius = api.pageParam.menuRadius?api.pageParam.menuRadius:"5";
			//内容文字颜色
			var textColor = api.pageParam.textColor?api.pageParam.textColor:"#333333";
			//已选文字颜色
			var activeColor = api.pageParam.activeColor?api.pageParam.activeColor:"#f1c40f";
			//已选背景颜色
			var activeBgColor = api.pageParam.activeBgColor?api.pageParam.activeBgColor:"#eeeeee";
			//文字对其方式
			var textAlign = api.pageParam.textAlign?api.pageParam.textAlign:"left";
			//文字大小
			var textSize = api.pageParam.textSize?api.pageParam.textSize:"18";
			//文字内容
			var textData = api.pageParam.textData?api.pageParam.textData:["首页","好友圈","群微博","我的微博","-","特别关注","名人明星","同事","同学","吐槽"];
			//分割线颜色
			var lineColor = api.pageParam.lineColor?api.pageParam.lineColor:"#eeeeee";
			//预设选中
			var textDefault = api.pageParam.textDefault?api.pageParam.textDefault:"首页";
			
			//内容处理
			var modalTopView = document.getElementById("aui_modal_top_view");
			var html = "";
			for( k in textData){
				if(textData[k] === "-"){
					html += "<li style='border-top:1px solid "+lineColor+";'></li>";
				}else{
					if(textDefault === textData[k]){
						html += "<li style='color:"+activeColor+";background-color:"+activeBgColor+";text-align:"+textAlign+";' class='aui-eg-modal-top-view-cell'>"+textData[k]+"</li>";
					}else{
						html += "<li onclick='topListTouch("+k+");' style='color:"+textColor+";text-align:"+textAlign+";' class='aui-eg-modal-top-view-cell'>"+textData[k]+"</li>";
					}
				}
			}
			modalTopView.innerHTML = html;
			
			//顶角处理
			if (point == "on") {
				y = y + pointH;
				var modalTopPoint = document.getElementById("aui_modal_top_point");
				modalTopPoint.style.borderLeft = pointH + "px solid transparent";
				modalTopPoint.style.borderRight = pointH + "px solid transparent";
				modalTopPoint.style.borderBottom = pointW + "px solid " + menuBgColor;
				pointH = pointH + 5;
				pointX = pointX - 5;
				modalTopPoint.style.webkitTransform = "translate(" + pointX + "px,-" + pointH + "px)";
				modalTopPoint.style.transform = "translate(" + pointX + "px,-" + pointH + "px)";
				modalTopPoint.classList.remove("aui-hide");
			}
			//框架处理
			var modal = document.getElementById('aui_modal');
			modal.style.backgroundColor = "rgba(0,0,0," + modalOpacity + ")";
			var modalTop = document.getElementById("aui_modal_top");
			modalTop.style.width = w + "px";
//			modalTop.style.height = h + "px";
			modalTop.style.backgroundColor = menuBgColor;
			modalTop.style.webkitTransform = "translate(" + x + "px," + y + "px)";
			modalTop.style.transform = "translate(" + x + "px," + y + "px)";
			modalTop.style.webkitBorderRadius = menuRadius + "px";
			modalTop.style.borderRadius = menuRadius + "px";
			
			
		}
		function topListTouch(index){
			api.sendEvent({
				name:"aui-eg-modal-header-callback",
				extra: {buttonIndex:index}
			});
			event.stopPropagation();
			api.closeFrame();
		}
	</script>
</html>